<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文化典故起名</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "u4effu5b8b", "SimSun", "u5b8bu4f53", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      position: relative;
    }
    
    .navbar {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      background-color: var(--rice-paper);
      border-bottom: 1px solid var(--ink-wash-2);
      position: relative;
    }
    
    .navbar:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--vermilion), var(--mountain-green), var(--indigo-blue));
      opacity: 0.5;
    }
    
    .back-button {
      color: var(--ink-gray);
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .main-container {
      padding: 24px 20px 100px;
      position: relative;
    }
    
    .culture-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      position: relative;
      border-left: 3px solid var(--indigo-blue);
      overflow: hidden;
    }
    
    .culture-card:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q40 40, 80 20' stroke='%231f4a7c' stroke-width='0.8' fill='none' opacity='0.1'/%3E%3C/svg%3E");
      background-size: contain;
      opacity: 0.1;
    }
    
    .culture-image {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      background-color: var(--rice-paper-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .culture-image:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='30' viewBox='0 0 80 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 L10 15 L20 20 L30 10 L40 20 L50 5 L60 15 L70 10 L80 30' fill='%231f4a7c' opacity='0.2'/%3E%3C/svg%3E");
      background-size: cover;
    }
    
    .section-title {
      font-weight: 600;
      font-size: 18px;
      color: var(--ink-black);
      margin-bottom: 16px;
      margin-top: 30px;
      position: relative;
      padding-left: 14px;
    }
    
    .section-title:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background-color: var(--indigo-blue);
      border-radius: 2px;
      opacity: 0.8;
    }
    
    .section-title:first-child {
      margin-top: 0;
    }
    
    .intro-card {
      background-color: var(--rice-paper-light);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      border-left: 3px solid var(--indigo-blue);
      position: relative;
      overflow: hidden;
    }
    
    .intro-card p {
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-gray);
    }
    
    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .category-item {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      border: 1px solid var(--ink-wash-1);
      transition: all 0.3s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .category-item:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(135deg, rgba(31, 74, 124, 0.03), transparent);
      z-index: 0;
    }
    
    .category-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: var(--indigo-blue);
    }
    
    .category-item.selected {
      border-color: var(--indigo-blue);
      background-color: rgba(31, 74, 124, 0.08);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .category-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 8px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--indigo-blue);
    }
    
    .category-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink-black);
      position: relative;
      z-index: 1;
    }
    
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }
    
    .tag-item {
      background-color: var(--rice-paper);
      border: 1px solid var(--ink-wash-2);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      color: var(--ink-gray);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .tag-item:hover {
      border-color: var(--indigo-blue);
      color: var(--indigo-blue);
    }
    
    .tag-item.selected {
      background-color: rgba(31, 74, 124, 0.1);
      border-color: var(--indigo-blue);
      color: var(--indigo-blue);
    }
    
    .poetry-container {
      display: none;
      margin-bottom: 30px;
    }
    
    .poetry-container.active {
      display: block;
      animation: fadeIn 0.4s ease forwards;
    }
    
    .allusion-container {
      display: none;
      margin-bottom: 30px;
    }
    
    .allusion-container.active {
      display: block;
      animation: fadeIn 0.4s ease forwards;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .poetry-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      border: 1px solid var(--ink-wash-2);
      position: relative;
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .poetry-card:hover {
      border-color: var(--indigo-blue);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .poetry-card.selected {
      border-color: var(--indigo-blue);
      background-color: rgba(31, 74, 124, 0.05);
    }
    
    .poetry-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink-black);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .poetry-author {
      font-size: 13px;
      color: var(--stone-gray);
    }
    
    .poetry-content {
      font-size: 15px;
      line-height: 1.8;
      color: var(--ink-gray);
      margin-top: 10px;
      white-space: pre-line;
    }
    
    .story-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      border: 1px solid var(--ink-wash-2);
      position: relative;
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .story-card:hover {
      border-color: var(--indigo-blue);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .story-card.selected {
      border-color: var(--indigo-blue);
      background-color: rgba(31, 74, 124, 0.05);
    }
    
    .story-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink-black);
      margin-bottom: 8px;
    }
    
    .story-content {
      font-size: 14px;
      color: var(--ink-gray);
      line-height: 1.6;
    }
    
    .story-more {
      font-size: 13px;
      color: var(--indigo-blue);
      margin-top: 10px;
      display: inline-block;
    }
    
    .ink-button {
      position: fixed;
      bottom: 25px;
      left: 20px;
      right: 20px;
      background-color: var(--indigo-blue);
      color: white;
      padding: 16px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(31, 74, 124, 0.3);
      transition: all 0.3s;
      overflow: hidden;
    }
    
    .ink-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s;
    }
    
    .ink-button:hover:before {
      left: 100%;
    }
    
    .ink-button:active {
      transform: translateY(2px);
      box-shadow: 0 2px 8px rgba(31, 74, 124, 0.2);
    }
    
    .ink-button.disabled {
      background-color: var(--ink-wash-2);
      box-shadow: none;
      cursor: not-allowed;
    }
    
    /* 水墨动画效果 */
    @keyframes inkSplash {
      0% { transform: scale(0); opacity: 0.6; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    
    .ink-splash {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(31, 74, 124, 0.2);
      transform: scale(0);
      pointer-events: none;
    }
    
    .animate-ink-splash {
      animation: inkSplash 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    
    /* 加载状态样式 */
    .loading-container {
      display: none;
      padding: 30px;
      text-align: center;
    }
    
    .loading-text {
      font-size: 14px;
      color: var(--ink-gray);
      margin-top: 16px;
    }
    
    .names-container {
      display: none;
    }
    
    .names-container.active {
      display: block;
    }
    
    .name-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid var(--ink-wash-2);
      position: relative;
      transition: all 0.3s;
    }
    
    .name-card:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      border-color: var(--ink-wash-1);
    }
    
    .name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .name-character {
      font-size: 26px;
      font-weight: 600;
      color: var(--ink-black);
      letter-spacing: 2px;
    }
    
    .name-score {
      color: var(--indigo-blue);
      font-weight: 600;
    }
    
    .name-detail {
      font-size: 13px;
      color: var(--stone-gray);
      display: flex;
      align-items: center;
      margin-top: 4px;
    }
    
    .name-source {
      font-size: 14px;
      color: var(--indigo-blue);
      margin-top: 10px;
      font-style: italic;
    }
    
    .name-meaning {
      font-size: 14px;
      color: var(--ink-gray);
      margin-top: 10px;
      line-height: 1.6;
    }
    
    .chinese-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      position: relative;
      background-color: var(--rice-paper-dark);
      color: var(--ink-gray);
      margin-right: 8px;
      margin-top: 8px;
      border: 1px solid var(--ink-wash-2);
    }
    
    .chinese-badge.blue {
      color: var(--indigo-blue);
      border-color: var(--indigo-blue);
      background-color: rgba(31, 74, 124, 0.1);
    }
    
    .chinese-badge.green {
      color: var(--mountain-green);
      border-color: var(--mountain-green);
      background-color: rgba(42, 93, 67, 0.1);
    }
    
    .chinese-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--ink-wash-2), transparent);
      margin: 20px 0;
    }
    
    /* u5178u7c4du9009u62e9u7f51u683c */
    .classics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .classic-item {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 16px 10px;
      text-align: center;
      border: 1px solid var(--ink-wash-1);
      transition: all 0.3s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .classic-item:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(135deg, rgba(31, 74, 124, 0.03), transparent);
      z-index: 0;
    }
    
    .classic-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: var(--indigo-blue);
    }
    
    .classic-item.selected {
      border-color: var(--indigo-blue);
      background-color: rgba(31, 74, 124, 0.08);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .classic-icon {
      font-size: 24px;
      margin-bottom: 8px;
      position: relative;
      z-index: 1;
    }
    
    .classic-name {
      font-size: 15px;
      color: var(--ink-black);
      position: relative;
      z-index: 1;
    }
    
    /* u5df2u9009u5178u7c4du5bb9u5668 */
    .selected-classics-container {
      margin-bottom: 20px;
      padding: 12px;
      background-color: var(--rice-paper-light);
      border-radius: 10px;
      display: none;
    }
    
    .selected-classics-container.active {
      display: block;
    }
    
    .selected-classics-label {
      font-size: 14px;
      color: var(--ink-gray);
      margin-bottom: 8px;
      display: block;
    }
    
    .selected-classics-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .selected-classic {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      background-color: rgba(31, 74, 124, 0.1);
      border: 1px solid var(--indigo-blue);
      border-radius: 15px;
      font-size: 13px;
      color: var(--indigo-blue);
    }
    
    .remove-classic {
      margin-left: 6px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 背景装饰 -->
  <div class="mountain-bg">
    <img src="images/mountain-bg.svg" alt="山水背景" style="width:100%; height:100%; object-fit:cover;">
  </div>
  
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <a href="index.html" class="back-button">
      <i data-lucide="arrow-left" class="w-6 h-6"></i>
    </a>
    <div class="text-lg font-semibold">文化典故起名</div>
  </div>
  
  <div class="main-container">
    <!-- 介绍信息 -->
    <div class="intro-card">
      <p>文化典故起名是基于中国传统文化经典，从诗词、典故中汲取灵感，赋予名字深厚的文化底蕴。选择您喜欢的参考典籍和寓意，我们将为您的宝宝推荐符合期望的美好名字。</p>
    </div>
    
    <!-- 选择参考典籍 -->
    <h2 class="section-title">选择参考典籍（可多选）</h2>
    <div class="classics-grid">
      <div class="classic-item" data-classic="楚辞">
        <div class="classic-icon">📜</div>
        <div class="classic-name">楚辞</div>
      </div>
      
      <div class="classic-item" data-classic="诗经">
        <div class="classic-icon">📖</div>
        <div class="classic-name">诗经</div>
      </div>
      
      <div class="classic-item" data-classic="唐诗宋词">
        <div class="classic-icon">🏮</div>
        <div class="classic-name">唐诗宋词</div>
      </div>
      
      <div class="classic-item" data-classic="易经">
        <div class="classic-icon">☯️</div>
        <div class="classic-name">易经</div>
      </div>
      
      <div class="classic-item" data-classic="庄子">
        <div class="classic-icon">🦋</div>
        <div class="classic-name">庄子</div>
      </div>
      
      <div class="classic-item" data-classic="论语">
        <div class="classic-icon">🏛️</div>
        <div class="classic-name">论语</div>
      </div>
      
      <div class="classic-item" data-classic="大学">
        <div class="classic-icon">🎓</div>
        <div class="classic-name">大学</div>
      </div>
      
      <div class="classic-item" data-classic="中庸">
        <div class="classic-icon">⚖️</div>
        <div class="classic-name">中庸</div>
      </div>
      
      <div class="classic-item" data-classic="孟子">
        <div class="classic-icon">📚</div>
        <div class="classic-name">孟子</div>
      </div>
      
      <div class="classic-item" data-classic="经典典故无限制">
        <div class="classic-icon">🔍</div>
        <div class="classic-name">经典典故无限制</div>
      </div>
    </div>
    
    <div class="selected-classics-container" id="selectedClassicsContainer">
      <div class="selected-classics-label">已选典籍：</div>
      <div class="selected-classics-list" id="selectedClassicsList">
        <!-- 已选典籍标签将通过JavaScript动态添加 -->
      </div>
    </div>
    
    <!-- 选择寓意标签 -->
    <h2 class="section-title">选择寓意标签（可多选）</h2>
    <div class="tags-container">
      <div class="tag-item" data-tag="wisdom">智慧聪颖</div>
      <div class="tag-item" data-tag="virtue">品德高尚</div>
      <div class="tag-item" data-tag="ambition">志向远大</div>
      <div class="tag-item" data-tag="elegance">优雅脱俗</div>
      <div class="tag-item" data-tag="courage">勇敢坚毅</div>
      <div class="tag-item" data-tag="peace">平和宁静</div>
      <div class="tag-item" data-tag="talent">才华横溢</div>
      <div class="tag-item" data-tag="luck">吉祥如意</div>
      <div class="tag-item" data-tag="nature">自然灵动</div>
    </div>
    
    <!-- 诗词内容区域 -->
    <div class="poetry-container" id="poetryContainer">
      <h2 class="section-title">选择心仪的诗句（可选）</h2>
      
      <div class="poetry-card" data-poetry="李白-静夜思">
        <div class="poetry-title">
          <span>静夜思</span>
          <span class="poetry-author">唐·李白</span>
        </div>
        <div class="poetry-content">床前明月光，疑是地上霜。
举头望明月，低头思故乡。</div>
      </div>
      
      <div class="poetry-card" data-poetry="王维-山居秋暝">
        <div class="poetry-title">
          <span>山居秋暝</span>
          <span class="poetry-author">唐·王维</span>
        </div>
        <div class="poetry-content">空山新雨后，天气晚来秋。
明月松间照，清泉石上流。
竹喧归浣女，莲动下渔舟。
随意春芳歇，王孙自可留。</div>
      </div>
      
      <div class="poetry-card" data-poetry="杜甫-春望">
        <div class="poetry-title">
          <span>春望</span>
          <span class="poetry-author">唐·杜甫</span>
        </div>
        <div class="poetry-content">国破山河在，城春草木深。
感时花溅泪，恨别鸟惊心。
烽火连三月，家书抵万金。
白头搔更短，浑欲不胜簪。</div>
      </div>
      
      <div class="poetry-card" data-poetry="苏轼-水调歌头">
        <div class="poetry-title">
          <span>水调歌头·明月几时有</span>
          <span class="poetry-author">宋·苏轼</span>
        </div>
        <div class="poetry-content">明月几时有？把酒问青天。
不知天上宫阙，今夕是何年。
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间。

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。</div>
      </div>
    </div>
    
    <!-- 加载中状态 -->
    <div class="loading-container" id="loadingContainer">
      <img src="images/icons/loading.svg" alt="加载中" class="w-10 h-10 mx-auto animate-spin">
      <div class="loading-text">正在为您生成文化典故名字...</div>
    </div>
    
    <!-- 名字推荐区域 -->
    <div class="names-container" id="namesContainer">
      <h2 class="section-title">推荐名字</h2>
      
      <div id="namesList">
        <!-- 名字卡片将通过JavaScript动态添加 -->
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <button class="ink-button disabled" id="generateNamesBtn">生成名字</button>
  </div>
  
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
    
    document.addEventListener('DOMContentLoaded', function() {
      // u83b7u53d6u7528u6237u6570u636e
      const formData = JSON.parse(localStorage.getItem('namingFormData') || '{}');
      
      // u9875u9762u5143u7d20
      const classicItems = document.querySelectorAll('.classic-item');
      const selectedClassicsContainer = document.getElementById('selectedClassicsContainer');
      const selectedClassicsList = document.getElementById('selectedClassicsList');
      const poetryContainer = document.getElementById('poetryContainer');
      const tagItems = document.querySelectorAll('.tag-item');
      const poetryCards = document.querySelectorAll('.poetry-card');
      const loadingContainer = document.getElementById('loadingContainer');
      const namesContainer = document.getElementById('namesContainer');
      const namesList = document.getElementById('namesList');
      const generateNamesBtn = document.getElementById('generateNamesBtn');
      
      let selectedClassics = [];
      let selectedTags = [];
      let selectedPoetry = null;
      
      // u68c0u67e5u8868u5355u6570u636e
      if (!formData.surname) {
        const randomSurnames = ['u674e', 'u738b', 'u5f20', 'u5218', 'u9648', 'u6768', 'u8d75', 'u9ec4', 'u5468', 'u5434'];
        formData.surname = randomSurnames[Math.floor(Math.random() * randomSurnames.length)];
      }
      
      // u5178u7c4du9009u62e9
      classicItems.forEach(item => {
        item.addEventListener('click', function(e) {
          createInkSplash(e, this);
          
          const classicValue = this.getAttribute('data-classic');
          
          if (this.classList.contains('selected')) {
            this.classList.remove('selected');
            selectedClassics = selectedClassics.filter(classic => classic !== classicValue);
            // u79fbu9664u5df2u9009u5178u7c4du6807u7b7e
            const tagToRemove = document.querySelector(`.selected-classic[data-classic="${classicValue}"]`);
            if (tagToRemove) tagToRemove.remove();
          } else {
            this.classList.add('selected');
            selectedClassics.push(classicValue);
            // u6dfbu52a0u5df2u9009u5178u7c4du6807u7b7e
            const classicTag = document.createElement('div');
            classicTag.className = 'selected-classic';
            classicTag.setAttribute('data-classic', classicValue);
            classicTag.innerHTML = `${classicValue}<span class="remove-classic" data-classic="${classicValue}">×</span>`;
            selectedClassicsList.appendChild(classicTag);
            
            // u6dfbu52a0u6807u7b7eu79fbu9664u4e8bu4ef6
            const removeBtn = classicTag.querySelector('.remove-classic');
            removeBtn.addEventListener('click', function() {
              const classicToRemove = this.getAttribute('data-classic');
              document.querySelector(`.classic-item[data-classic="${classicToRemove}"]`).classList.remove('selected');
              selectedClassics = selectedClassics.filter(classic => classic !== classicToRemove);
              classicTag.remove();
              
              if (selectedClassics.length === 0) {
                selectedClassicsContainer.classList.remove('active');
              }
              
              updateButtonState();
            });
          }
          
          // u5f53u6709u5178u7c4du88abu9009u4e2du65f6u663eu793au5bb9u5668
          if (selectedClassics.length > 0) {
            selectedClassicsContainer.classList.add('active');
          } else {
            selectedClassicsContainer.classList.remove('active');
          }
          
          updateButtonState();
        });
      });
      
      // u6807u7b7eu9009u62e9
      tagItems.forEach(tag => {
        tag.addEventListener('click', function(e) {
          createInkSplash(e, this);
          
          const tagValue = this.getAttribute('data-tag');
          
          if (this.classList.contains('selected')) {
            this.classList.remove('selected');
            selectedTags = selectedTags.filter(tag => tag !== tagValue);
          } else {
            this.classList.add('selected');
            selectedTags.push(tagValue);
          }
          
          updateButtonState();
        });
      });
      
      // u8bd7u8bcdu9009u62e9
      poetryCards.forEach(card => {
        card.addEventListener('click', function(e) {
          createInkSplash(e, this);
          
          poetryCards.forEach(c => c.classList.remove('selected'));
          this.classList.add('selected');
          selectedPoetry = this.getAttribute('data-poetry');
          
          updateButtonState();
        });
      });
      
      // u751fu6210u540du5b57u6309u94ae
      generateNamesBtn.addEventListener('click', function(e) {
        if (this.classList.contains('disabled')) {
          return;
        }
        
        createInkSplash(e, this);
        
        loadingContainer.style.display = 'block';
        namesContainer.classList.remove('active');
        
        // u6a21u62dfu52a0u8f7du8fc7u7a0b
        setTimeout(() => {
          loadingContainer.style.display = 'none';
          generateNames();
          namesContainer.classList.add('active');
        }, 1500);
      });
      
      // u66f4u65b0u6309u94aeu72b6u6001
      function updateButtonState() {
        if (selectedClassics.length > 0 && selectedTags.length > 0) {
          generateNamesBtn.classList.remove('disabled');
        } else {
          generateNamesBtn.classList.add('disabled');
        }
      }
      
      // u6c34u58a8u70b9u51fbu52a8u753bu6548u679c
      function createInkSplash(e, element) {
        const splash = document.createElement('div');
        splash.classList.add('ink-splash');
        
        const rect = element.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height) * 2;
        
        splash.style.width = `${size}px`;
        splash.style.height = `${size}px`;
        splash.style.left = `${e.clientX - rect.left - size/2}px`;
        splash.style.top = `${e.clientY - rect.top - size/2}px`;
        
        element.appendChild(splash);
        
        setTimeout(() => {
          splash.classList.add('animate-ink-splash');
        }, 10);
        
        setTimeout(() => {
          splash.remove();
        }, 600);
      }
      
      // u751fu6210u540du5b57u5217u8868
      function generateNames() {
        // u6a21u62dfu6839u636eu5178u7c4du548cu5bd3u610fu751fu6210u7684u540du5b57u6570u636e
        const classicSources = {
          '楚辞': [
            {
              name: 'u96eau5170',
              meaning: 'u53d6u81eau695au8f9eu300au4e5du6b4cu00b7u5c71u9b42u300bu4e2d"u5c71u954du7b49u5170",u5bd3u610fu5316u4e0bu5373u56deu51e0u5355u7cb9u96eauleau3002u5510u4ee3u6709u540cu540du3002u7ed9u4e0au8c08u76eeu524du5c71u5361u7f8a',
              source: 'u300au695au8f9eu00b7u4e5du6b4cu00b7u5c71u9b42u300buff1a"u5c71u7389u8f6cu514du955cuFF0Cu5c71u954du7b49u5170u8349"',
              score: 95
            },
            {
              name: 'u695au9752',
              meaning: 'u53d6u81eau695au8f9eu4e2du5bf9u695au5730u7684u63cfu8ff0uff0cu5bd3u610fu751fu4e8eu695au5730uff0cu5177u6709u4e00u79cdu53e4u5178u6c14u8d28uff0cu9ad8u96c5u8131u4fd7uff0cu5fe0u8bda u7f8eu597du3002',
              source: 'u300au695au8f9eu00b7u4e5du6b4cu00b7u4e5du6b4cu300buff1a"u4f55u69cau695au6df1u4e8eff0cu9ad8u5cadu6df1u6df9"',
              score: 92
            }
          ],
          '诗经': [
            {
              name: 'u96efu96c5',
              meaning: 'u96efu6765u81eau8bd7u7ecfu4e2du300au5c0fu96efu300bu7bc7uff0cu96c5u610fu4e3au7f8eu597du96c5u81f4uff0cu5408u8d77u6765u5bd3u610fu9ad8u96c5u7f8eu4e3du7684u8bed u8a00uff0cu96c5u81f4u7684u4e3bu5f20uff0cu6216u662fu6587u5b66u4f5cu54c1u3002',
              source: 'u300au8bd7u7ecfu00b7u9ec4u9e1fu00b7u5c0fu96efu300buff1a"u53c8u96efu53c8u96eeuff0cu55e1u55e1u4e2du4eba"',
              score: 94
            },
            {
              name: 'u5c55u7fd4',
              meaning: 'u5c55u6307u5c55u793au3001u663eu73b0uff0cu7fd4u6307u98deu7fd4uff0cu5c55u7fd4u5408u7528u5bd3u610fu5c55u956cu624du534eu3001u98deu9e3fu9ad8u7fd4u3002',
              source: 'u300au8bd7u7ecfu00b7u5927u96c5u00b7u516cu5203u300buff1a"u9e3fu9e3fu4e8eu98deu70c2uff0cu4ed6u5c71u7ef4u9638"',
              score: 91
            }
          ],
          '唐诗宋词': [
            {
              name: 'u6708u534e',
              meaning: 'u53d6u81eau53e4u8bd7u4e2du5bf9u6708u5149u7684u63cfu8ff0uff0cu5bd3u610fu9ad8u6d01u5982u6708uff0cu5149u534eu5185u655buff0cu7167u4eaeu4ed6u4ebau3001u6e29u6da6u5982u7389u3002',
              source: 'u674eu767du300au9759u591cu601du300buff1a"u5e8au524du660eu6708u5149uff0cu7591u662fu5730u4e0au971c"',
              score: 93
            },
            {
              name: 'u8bd7u8fdc',
              meaning: 'u5bd3u610fu80f6u6000u8bd7u610fuff0cu5fd7u5411u9ad8u8fdcuff0cu6587u91c7u6590u7136uff0cu601du60f3u6df1u9083u5982u8bd7u8bcdu822cu610fu5883u6df1u8fdcu3002',
              source: 'u82cfu8f7cu300au6c34u8c03u6b4cu5934u300buff1a"u4f46u613Fu4ebau957fu4e45uff0cu5343u91ccu5171u5a75u5a1f"',
              score: 95
            }
          ],
          '易经': [
            {
              name: 'u4e7eu5143',
              meaning: 'u4e7eu5373u4e7eu535au672cu535auff0cu5143u6307u5143u9996u3001u5f00u5f00uff0cu5408u8d77u6765u5bd3u610fu5929u7b49u7ea7u521du59cbu72b6u6001u3001u521du59cbu7684u8d28u3002',
              source: 'u300au6613u7ecfu00b7u4e7eu536buh:"u4e7eu5143u4e7eu4e7eu6c42u88abu541buuff0cu65e0u5c1au5927u541d"',
              score: 90
            },
            {
              name: 'u76dbuu5fb7',
              meaning: 'u76dbu6307u5174u65fau7684u72b6u6001uff0cu5fb7u6307u9053u5fb7uff0cu76dbu5fb7u5408u7528u5bd3u610fu9053u5fb7u6ee1u6ee1uff0cu5145u6ee1u6b63u80ddu9053u5fb7u7684u54c1u8d28u3002',
              source: 'u300au6613u7ecfu00b7u76dbu536buh:"u76dbu5927u793cu4e0du4e47uff0cu5b9du6c11u7528u548cu3002"',
              score: 93
            }
          ],
          '庄子': [
            {
              name: 'u9038u7136',
              meaning: 'u9038u6307u60a0u95f2u81eau5f97uff0cu7136u6307u81eau7136uff0cu9038u7136u5408u7528u5bd3u610fu60a0u7136u81eaun:u3001u60a0u95f2u4f4fu59d0u3001u81eau4fe1u4ece u5bb9u3002',
              source: 'u300au5e84u5b50u00b7u903bu8f96u300buff1a"u96bfu96e8u9038u7136uff0cu82b3u8349u5b8cu81ea u517cu3002"',
              score: 89
            },
            {
              name: 'u9038u7fd4',
              meaning: 'u9038u6307u60a0u95f2u81eau5f97uff0cu7fd4u662fu98deu7fd4uff0cu5408u7528u5bd3u610fu81eau7531u81eau5728uff0cu4e0du62d8u675fu3001u4e0du8bbau5ff5u3001u5982u9e1fu822cu98deu7fd4u3002',
              source: 'u300au5e84u5b50u00b7u903bu8f96u300buff1a"u9038u6e38u65e0u5723u4ebau8ff9uff0cu4e0du62d8u675fu4e0du8bbau5ff5u3002"',
              score: 92
            }
          ],
          '论语': [
            {
              name: 'u5b66u5b50',
              meaning: 'u5b66u6307u5b66u4e60uff0cu5b50u6307u6709u624du5fb7u7684u4ebau3002u5b66u5b50u5408u7528u5bd3u610fu6db5u517buf22iu3001u5c0au5e08u91cdu9053u3001u6c38u8fdc u4fdd u6301u5b66u4e60u7684u72b6u6001u3002',
              source: 'u300au8bbau8bedu00b7u5b66u800bu300buff1a"u5b66u800bu65f6u4e60u4e4buff0fu4e0du4ebau60dcu4e4buff0fu57fau5b50u866bu4e4buff1f"',
              score: 87
            },
            {
              name: 'u5b9du6167',
              meaning: 'u5b9du6307u73cdu5b9du3001u8d35u91cdu7684uff0cu6167u6307u806au6167uff0cu5408u7528u5bd3u610fu5f3au8c03u667au6167u5982u540cu73cdu5b9du822cu73cdu8d35uff0cu61c8u6167u7684u91cdu8981u3002',
              source: 'u300au8bbau8bedu00b7u536bu7075u516cu300buff1a"u519bu4e8bu670du5b9du6167u4ebau4e00u3002u4ebau9759u4e4buff0cu9b3Cu795euu4f1Auu3002"',
              score: 94
            }
          ],
          '大学': [
            {
              name: 'u54c1u5fd7',
              meaning: 'u54c1u6307u54c1u683cuff0cu5fd7u6307u5fd7u5411uff0cu5408u7528u5bd3u610fu54c1u683cu9ad8u5c1au3001u5fd7u5411u8fdc u5927u3002',
              source: 'u300au5927u5b66u300buff1a"u77e5u672cu8214u9053uff0cu5fc5u5148u8bf4u8bfbuff0cu79d8u7b97u7ec3u51e0uff0cu5fd7u5fc3u4e00u5904u3002"',
              score: 91
            },
            {
              name: 'u660eu8fb0',
              meaning: 'u660eu6307u5149u660euff0cu8fb0u6307u9633u5149uff0cu660eu8fb0u5408u7528u5bd3u610fu660eu5ae9u654fu9510uff0cu5149u660eu78cau843du5982u65e5u51fau4e1cu65b9u3002',
              source: 'u300au5927u5b66u300buff1a"u5927u5b66u4e4bu9053uff0cu5728u660eu660eu5fb7uff0cu5728u4eb2u6c11uff0cu5728u6b62u4e8eu81eau3002"',
              score: 96
            }
          ],
          '中庸': [
            {
              name: 'u4e2du6052',
              meaning: 'u4e2du6307u4e2du6b63uff0cu6052u6307u6052u5f3au3001u4fdd u6301u3002u4e2du6052u5408u7528u5bd3u610fu4e0du504eu4e0du504fuff0cu884cu4e8eu4e2du9053uff0cu59cbu7ec8u5982u4e00u3002',
              source: 'u300au4e2du5eb8u300buff1a"u4e2du4e5fuu8005uff0cuu5929u4e0buu4e4buu5927uu672cuu4e5fuff1bu6052u4e5fuu8005uff0cuu5929uu4e0buu4e4buu8fbeuu9053uu4e5fuu3002"',
              score: 97
            },
            {
              name: 'u81eau7acb',
              meaning: 'u81eau6307u81eau5df1uff0cu7acbu6307u7a33u5f53uff0cu5408u7528u5bd3u610fu81eau5219u72ec u7acbuff0cu4e0du4f9d u9760u5916u7269uff0cu7814u5353u4e0d u7fa4u3002',
              source: 'u300au4e2du5eb8u300buff1a"u81eau7acbu4e8euu793auu5b97u5edfuff0cuu614euu72ecuu5c45uff0cuu8c26u800cuu5584u7acbuu5fb7u3002"',
              score: 89
            }
          ],
          '孟子': [
            {
              name: 'u542bu7ae0',
              meaning: 'u542bu6307u542bu82cdu5145u5b9duff0cu7ae0u6307u6587u91c7u6590u7136uff0cu5408u7528u5bd3u610fu542bu82cdu6ee1u8138uff0cu4e0eu4ebau4e3Au5584uff0cuu6587u7ae0u8d8Bu8da3u6a2au751fu3002',
              source: 'u300au793Au5149uu5f55u300buff1a"u542Buu82cduu767Eu4f70uff0cu7ae0u4e071uffuu4ee5u7ae0u7ae5uff0cuu5b57u4e4buu91c7uu7406u3002"',
              score: 90
            },
            {
              name: 'u6021u7136',
              meaning: 'u6021u6307u5feBu6021u7684u60c5u6001uff0cu7136u6307u81eau7136uff0cu6021u7136u5408u7528u5bd3u610fu5feBu4e50u81eau7136uff0cuu5e26u6709u6109u6082u6d3Bu6cfcu7684u7279u8d28u3002',
              source: 'u300auu59dau9f9fuu8bb0u300buff1a"u5c71u4e0buu591duu6c34uff0cuu7011u6d12u6021u7136uff0cuu5982u5929u7136u4e4buu7269u3002"',
              score: 94
            }
          ],
          '经典典故无限制': [
            {
              name: 'u542Bu7ae0',
              meaning: 'u542Bu6307u542Bu82cdu5145u5b9duff0cu7ae0u6307u6587u91c7u6590u7136uff0cu5408u7528u5bd3u610fu542bu82cdu6ee1u8138uff0cu4e0eu4ebau4e3Au5584uff0cuu6587u7ae0u8d8Bu8da3u6a2au751fu3002',
              source: 'u300au793Au5149uu5f55u300buff1a"u542Buu82cduu767Eu4f70uff0cu7ae0u4e071uffuu4ee5u7ae0u7ae5uff0cuu5b57u4e4buu91c7uu7406u3002"',
              score: 90
            },
            {
              name: 'u6021u7136',
              meaning: 'u6021u6307u5feBu6021u7684u60c5u6001uff0cu7136u6307u81eau7136uff0cu6021u7136u5408u7528u5bd3u610fu5feBu4e50u81eau7136uff0cuu5e26u6709u6109u6082u6d3Bu6cfcu7684u7279u8d28u3002',
              source: 'u300auu59dau9f9fuu8bb0u300buff1a"u5c71u4e0buu591duu6c34uff0cuu7011u6d12u6021u7136uff0cuu5982u5929u7136u4e4buu7269u3002"',
              score: 94
            }
          ]
        };
        
        // u6839u636eu9009u62e9u7684u5178u7c4du51b3u5b9au663Eu793au54eau7ec4u540du5b57
        let names = [];
        
        // u5982u679cu9009u62e9u4e86u591au4e2au5178u7c4duff0cu6bcfu4e2au5178u7c4du9009u4e00u4e2au540du5b57u6dfBu5230u7ed3u679cu4e2d
        if (selectedClassics.length > 0) {
          selectedClassics.forEach(classic => {
            if (classicSources[classic] && classicSources[classic].length > 0) {
              // u968fu673Au9009u62e9u4e00u4e2au540du5b57
              const randomIndex = Math.floor(Math.random() * classicSources[classic].length);
              names.push(classicSources[classic][randomIndex]);
            }
          });
        }
        
        // u5982u679cu6ca1u6709u5178u7c4du88abu9009u4e2du6216u6ca1u6709u5339u914du7684u540du5b57uff0cuu4f7fu7528u9ed8u8ba4u540du5b57
        if (names.length === 0) {
          names = [
            {
              name: 'u542Bu7ae0',
              meaning: 'u542Bu6307u542Bu82cdu5145u5b9duff0cu7ae0u6307u6587u91c7u6590u7136uff0cu5408u7528u5bd3u610fu542bu82cdu6ee1u8138uff0cu4e0eu4ebau4e3Au5584uff0cuu6587u7ae0u8d8Bu8da3u6a2au751fu3002',
              source: 'u300au793Au5149uu5f55u300buff1a"u542Buu82cduu767Eu4f70uff0cu7ae0u4e071uffuu4ee5u7ae0u7ae5uff0cuu5b57u4e4buu91c7uu7406u3002"',
              score: 90
            },
            {
              name: 'u660eu8fb0',
              meaning: 'u660eu6307u5149u660euff0cu8fb0u6307u9633u5149uff0cu660eu8fb0u5408u7528u5bd3u610fu660eu5ae9u654fu9510uff0cu5149u660eu78cau843du5982u65e5u51fau4e1cu65b9u3002',
              source: 'u300au5927u5b66u300buff1a"u5927u5b66u4e4bu9053uff0cu5728u660eu660eu5fb7uff0cu5728u4eb2u6c11uff0cu5728u6b62u4e8eu81eau3002"',
              score: 96
            },
            {
              name: 'u6708u534e',
              meaning: 'u53d6u81eau53e4u8bd7u4e2du5bf9u6708u5149u7684u63cfu8ff0uff0cu5bd3u610fu9ad8u6d01u5982u6708uff0cu5149u534eu5185u655buff0cu7167u4eaeu4ed6u4ebau3001u6e29u6da6u5982u7389u3002',
              source: 'u674eu767du300au9759u591cu601du300buff1a"u5e8au524du660eu6708u5149uff0cu7591u662fu5730u4e0au971c"',
              score: 93
            }
          ];
        }
        
        // u6e05u7a7au540du5b57u5217u8868
        namesList.innerHTML = '';
        
        // u6dfBu52a0u540du5b57u5361u7247
        names.forEach(nameData => {
          const nameCard = document.createElement('div');
          nameCard.className = 'name-card';
          nameCard.innerHTML = `
            <div class="name-row">
              <div class="name-character">${formData.surname}${nameData.name}</div>
              <div class="name-score">${nameData.score}u5206</div>
            </div>
            <div class="name-detail">
              <i data-lucide="award" class="w-4 h-4 mr-1"></i>
              <span>u6587u5316u5e95u8574u4e30u5bcc</span>
            </div>
            <div class="chinese-divider"></div>
            <div class="name-meaning">${nameData.meaning}</div>
            <div class="name-source">u6765u6e90: ${nameData.source}</div>
            <div class="mt-3">
              <span class="chinese-badge blue">u97f3u5f8bu548cu8c10</span>
              <span class="chinese-badge green">u5b57u5f62u4f18u7f8e</span>
              <span class="chinese-badge">u5178u7c4du6587u5316</span>
            </div>
          `;
          
          namesList.appendChild(nameCard);
        });
        
        // u521du59cbu5316u65b0u6dfBu52a0u7684Lucideu56feu6807
        lucide.createIcons();
      }
    });
  </script>
</body>
</html> 